<!-- 子元素 -->
<template>
    <template v-if="widgetTreeList.length > 0">
        <el-collapse modelValue="1">
            <el-collapse-item title="子元素" name="1">
                <el-tree
                    :data="widgetTreeList"
                    node-key="id"
                    default-expand-all
                    expand-on-click-node
                    :highlight-current="false"
                    class="row-child-element-tree"
                >
                    <template #default="{ node, data }">
                        <div class="widget-tree-item">
                            <div class="tree-title">
                                <template v-if="data.editStatus">
                                    <el-input v-model="data.label" @click.stop="() => ({})" />
                                </template>
                                <template v-else>
                                    {{ data.label }}
                                </template>
                            </div>
                            <div class="tree-btns">
                                <el-icon title="设置" @click.stop="handleSelectWidget(data.id)"><icon-setting /></el-icon>
                                <el-icon title="删除" @click.stop="handleDeleteWidget(data.id)"><icon-delete /></el-icon>
                            </div>
                        </div>
                    </template>
                </el-tree>

                <template v-if="!['xxx'].includes(widgetType)">
                    <div class="tip-txt">* 最多展示三级（为避免三级以上的组件不显示，尽量减少自由面板的使用）</div>
                </template>
            </el-collapse-item>
        </el-collapse>
    </template>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import useWidget from '@/libs/edit/widgetData'
import usePageHistory from '@/libs/edit/pageHistory'
import usePhoneView from '@/libs/edit/phoneView'
export default defineComponent({
    name: 'RowChildElement',
    props: {
        widget: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { widget } = toRefs(props)

        const {
            widgetListFlat,
            onSelectWidget,
            onDeleteWidget
        } = useWidget()

        const {
            onAddPageHistory
        } = usePageHistory()

        const {
            setScrollTopId
        } = usePhoneView()

        const widgetType = computed(() => widget.value?.widgetData?.eles?.type)
        const widgetChildElementList = computed(() => {
            if (['free-vessel', 'sidebar', 'popup-window'].includes(widgetType.value)) {
                return widget.value.widgetData.eles.content || []
            }
            return []
        })

        const widgetTreeList = computed(() => {
            // treeCount 树层级数限制
            const forChildren = (list, treeCount) => {
                return list.map(item => {
                    let children = []
                    if (treeCount > 0
                        && Object.prototype.toString.call(item?.eles?.content) === '[object Array]'
                        && item?.eles?.content?.some(n => !!n?.eles?.type)) {
                        children = forChildren(item?.eles?.content || [], treeCount - 1)
                    }
                    return {
                        id: item.eles.id,
                        label: item.eles.customFeature.name || item.component.title,
                        editStatus: false,
                        widget: item,
                        children
                    }
                })
            }
            return forChildren(widgetChildElementList.value, 2)
        })

        const handleSelectWidget = id => {
            onSelectWidget([id])
            setScrollTopId(id)
        }
        const handleDeleteWidget = id => {
            onDeleteWidget([id])
            onAddPageHistory()
        }

        return {
            widget,
            widgetType,
            widgetListFlat,
            widgetTreeList,

            handleSelectWidget,
            handleDeleteWidget
        }
    }
})
</script>

<style lang="less" scoped>
::v-deep(.row-child-element-tree) {
    border-left: 1px solid var(--edit-border-color);
    border-right: 1px solid var(--edit-border-color);
    border-bottom: 1px solid var(--edit-border-color);
    background-color: inherit;
    .el-tree-node {
        white-space: normal;
        .el-tree-node__content {
            height: auto;
        }
    }
    .el-tree-node__label {
        flex: 1;
    }
    & > .el-tree-node .el-tree-node__content {
        border-top: 1px solid var(--edit-border-color);
    }
    .widget-tree-item-active {
        & > .el-tree-node__content {
            color: var(--edit-color-primary);
            background-color: var(--edit-color-primary-light-8);
        }
    }
    .widget-tree-item {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 10px 16px 10px 0;
        box-sizing: border-box;
        .tree-title {
            margin-right: 20px;
        }
        .tree-btns {
            display: flex;
            align-items: center;
            .el-icon {
                font-size: 16px;
                & + .el-icon {
                    margin-left: 10px;
                }
                &:hover {
                    color: var(--edit-color-primary);
                }
            }
        }
    }
}
.tip-txt {
    color: var(--edit-color-info);
    font-size: 12px;
    margin-top: 10px;
}
</style>